<!-- 文件描述: 项目管理数据导入组件 -->
<!-- 作者: 苏宇浩 -->
<!-- 时间: 2021/12/08 -->
<template>
  <div>
    <s-popup-box :visible='visible' @cancel='cancel' title="数据批次提取">
      <Form :model="formData" :label-width="100">
        <FormItem label="批次编号:">
          <Input type="text" v-model="formData.user" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="提数方式:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
        <FormItem label="">
          <Upload action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">上传</Button>
          </Upload>
        </FormItem>
        <FormItem label="截止日期:">
          <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="紧急程度:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
      </Form>
      <template slot='active'>
        <div>
          <Button type="primary" @click='cancel'>取消</Button>
          <Button type="primary" @click="StartImporting">开始导入</Button>
        </div>
      </template>
    </s-popup-box>
    <s-popup-box :visible='visible2' @cancel='cancel2' title="导数结果">
      <Form :model="formData" :label-width="100">
        <FormItem label="批次编号:">
          <Input type="text" v-model="formData.user" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="提数数据量:">
          <Input type="text" v-model="formData.user" placeholder="">
          </Input>
        </FormItem>
        <FormItem label="数据结构">
          <ul class="data-construction">
            <li class="data-construction-item">1</li>
            <li class="data-construction-item">2</li>
            <li class="data-construction-item">3</li>
          </ul>
        </FormItem>
        <FormItem label="截止日期:">
          <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem label="紧急程度:">
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
          </Select>
        </FormItem>
      </Form>
      <template slot='active'>
        <div>
          <Button type="primary" @click="cancel2">重新选择数据</Button>
          <Button type="primary" @click="successImporting">导入完成</Button>
        </div>
      </template>
    </s-popup-box>
  </div>
</template>

<script>
import SPopupBox from "@/components/syh/s-PopupBox/s-PopupBox.vue";
export default {
  name: "Popupbox",
  props: {
    visible: {
      type: Boolean,
    },
  },
  data() {
    return {
      visible2: false,
      formData: {},
      model1: "",
      cityList: ["模板1", "模板2", "模板3"],
    };
  },

  mounted() {},
  components: {
    SPopupBox,
  },
  methods: {
    /**
     * @description 关闭提数弹框
     * @param
     */
    cancel() {
      this.$emit("cancel", false);
    },
    /**
     * @description 开始导入
     * @param
     */
    StartImporting() {
      this.visible2 = true;
    },
    /**
     * @description 关闭提数弹框
     * @param
     */
    cancel2() {
      this.visible2 = false;
    },
    /**
     * @description 导入完成
     * @param
     */
    successImporting() {
      this.visible2 = false;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-construction {
  display: flex;
  list-style: none;
  border: 0.5px solid #ccc;
  .data-construction-item {
    width: 86px;
    height: 30px;
    text-align: center;
    border: 0.5px solid #ccc;
  }
}
</style>